<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for指令</title>
</head>

<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <input type="button" value="年龄正排序" @click="sortType = 1">
        <input type="button" value="年龄倒排序" @click="sortType = 2">
        <input type="button" value="平均分倒排序" @click="sortType = 3">
        
        
      

        <ul>
            <li>
              <td>应聘人</td>
              <td>性别</td>
              <td>年年</td>
              <td>学校</td>
              <td>专业</td>
              <td>学历</td>
              <td>学位</td>
              <td>成绩</td>
               <td>平均分</td>
               <td>分数</td>
              
            </li> 
            <li v-for="(it1,index) in filllist1">
              <td>{{ it1.name }}</td>
              <td>{{ it1.sex }}</td>
              <td>{{ it1.age }}</td>
              <td>{{ it1.school }}</td>
              <td>{{ it1.marge }}</td>
              <td>{{ it1.xueli }}</td>
              <td>{{ it1.xuewei }}</td>
              <td>{{ it1.mscj }}</td>
              <td>{{ pjf }}</td>
              <td>{{ Math.round((it1.score.reduce((a,b)=>(a + b)) )/it1.score.length,2)    }} 
               <input type="button" v-on:click="clickme(it1)" value="">  
              </td>

            </li>

           
        </ul>
        
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                list1:[ {
          name:'王小虎',
          sex:'男',
          age:17,
		  school:'八维学校',
          marge:'大数据',
          xueli:'本科',
          xuewei:'学士',
          mscj:'摄影89,灯光90,化妆90',
		  score:[89,90,90],
          pjf:0
        },
		{
          name:'王小虎1',
          sex:'男',
          age:18,
		  school:'八维学校',
          marge:'大数据',
          xueli:'本科',
          xuewei:'学士',
          mscj:'摄影90,灯光89,化妆70',
		  score:[90,89,70],
          pjf:0
        },
		{
          name:'王小虎2',
          sex:'男',
          age:19,
		  school:'八维学校',
          marge:'大数据',
          xueli:'本科',
          xuewei:'学士',
          mscj:'摄影60,灯光70,化妆90',
		  score:[60,70,90],
          pjf:0
        },
		{
          name:'王小虎3',
          sex:'男',
          age:19,
		  school:'八维学校',
          marge:'大数据',
          xueli:'本科',
          xuewei:'学士',
          mscj:'摄影89,化妆90',
		  score:[89,90],
          pjf:0
        }
		
		],
    cccc:[],
    cj:0,
    //默认排序类型
    sortType:0 
              
            },
          //排序计算数据
          computed: {
            filllist1(){
              //讲数据传递给一个变量
             let arr =   this.list1
             
             if(this.sortType == 1){
               return arr.sort( (a,b) => a.age - b.age  )
             }
             if(this.sortType == 2){
               return arr.sort( (a,b) => b.age - a.age  )
             }
             if(this.sortType == 3){
               return arr.sort( (a,b) => b.pjf  - a.pjf   )
             }
             
             
             return arr ;

            }
            
          },
            // 平均分为计算字段
            
  methods: {
    clickme(it1){
      let cc =  JSON.stringify(it1)
     // console.log( cc)
      alert(cc)
    
    },

    ageAsc(){
        alert("1")
        this.list1.sort((x,y)=> y.age - x.age)
    },
              jspjf(){


              },
                add:function(){
                    this.list1.push(	{
          name:'王小虎3',
          sex:'男',
          age:19,
		  school:'八维学校',
          marge:'大数据',
          xueli:'本科',
          xuewei:'学士',
          mscj:'摄影89,化妆90',
		  score:[89,90],
          pjf:0
        });
                },
                remove:function(){
                    this.list1.shift();
                }
            },
        })
    </script>
</body>

</html>